<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <div class="filter-li">
                <label>签约时间</label>
                <el-date-picker v-model="listQuery.time" type="daterange" placeholder="选择日期范围">
                </el-date-picker>
            </div>
            <div class="filter-li">
                <label>客户姓名</label>
                <el-select v-model="listQuery.customer_id" placeholder="请选择" clearable>
                    <el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>业务员</label>
                <el-select v-model="listQuery.userid" placeholder="请选择" clearable>
                    <el-option v-for="item in users" :key="item.userid" :label="item.name" :value="item.userid">
                    </el-option>
                </el-select>
            </div>
            <br/>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <!-- <el-button class="filter-item" type="success" v-waves icon="edit" @click="showFormAdd()">新建项目</el-button> -->
        </div>

        <!-- 列表 -->
        <el-table :data="list" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%">

            <el-table-column type="index" width="80">
            </el-table-column>

            <el-table-column align="center" label="项目代码">
                <template scope="scope">
                    <span>{{scope.row.proj_code}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="项目客户">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.source ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="业务员">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.type ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="项目状态">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.category ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="项目金额">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.result ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150">
                <template scope="scope">
                    <el-button v-show="!scope.row.edit" size="small" type="success" @click='scope.row.edit=!scope.row.edit'>编辑
                    </el-button>
                    <el-button v-show="scope.row.edit" size="small" type="danger" @click='scope.row.edit=!scope.row.edit'>取消
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 表单 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form ref="appForm" :rules="rules" class="small-space" :model="form" label-position="left" label-width="100px" style='width: 600px; margin-left:50px;'>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="项目信息" name="first">
                        <el-form-item label="客户姓名" prop="customer_id">
                            <el-select v-model="form.customer_id" placeholder="请选择">
                                <el-option v-for="item in customers" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="项目名称">
                            <el-input v-model="form.proj_name">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="项目代码">
                            <el-input v-model="form.proj_code">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="预计成交时间">
                            <el-date-picker v-model="form.plan_sale_time" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="业务员">
                            <el-select v-model="form.userid" placeholder="请选择">
                                <el-option v-for="item in users" :key="item.userid" :label="item.name" :value="item.userid">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="项目金额" prop="amount">
                            <el-date-picker v-model="form.amount" type="number">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="项目金额" prop="拜访费用">
                            <el-date-picker v-model="form.fee" type="number">
                            </el-date-picker>
                        </el-form-item>
                    </el-tab-pane>

                    <el-tab-pane label="项目描述信息" name="xmms">
                        <el-form-item label="项目交易方式（公开招标，竞争性谈判等）">
                            <el-input type="textarea" v-model="form.ms1"></el-input>
                        </el-form-item>

                        <el-form-item label="资金来源" prop="plan_sale_time">
                            <el-input type="textarea" v-model="form.ms2"></el-input>
                        </el-form-item>

                        <el-form-item label="项目关键人与其之间的关系">
                            <el-input type="textarea" v-model="form.ms3"></el-input>
                        </el-form-item>

                        <el-form-item label="竞争对手及竞争品牌及其关系">
                            <el-input type="textarea" v-model="form.ms4"></el-input>
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.remark"></el-input>
                        </el-form-item>
                    </el-tab-pane>


                    <el-tab-pane label="产品信息" name="third">
                        <el-table :data="form.products" border fit highlight-current-row style="width: 100%">
                            <el-table-column label="产品名称" prop="product_name">
                            </el-table-column>

                            <el-table-column width="150px" label="数量" prop="num">
                            </el-table-column>

                            <el-table-column width="150px" label="报价" prop="sale_price">
                            </el-table-column>

                            <el-table-column width="150px" label="总价" prop="amount">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="费用信息" name="fourth">
                        <el-table :data="form.costs" border fit highlight-current-row style="width: 100%">
                            <el-table-column width="150px" label="科目" prop="name">
                            </el-table-column>

                            <el-table-column width="250px" label="金额">
                                <template scope="scope">
                                    <el-input v-model="scope.row.amount"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import api from '@/api/project'
    import customerApi from '@/api/customer'
    import costApi from '@/api/cost'
    import userApi from '@/api/user'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import { mapGetters } from 'vuex'

    export default {
        name: 'project',
        directives: {
            waves
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: false,
                listQuery: {
                    page: 1,
                    limit: 20,
                    time: '',
                    userid: '',
                    customer_id: '',
                    proj_code: '',
                },
                users: [],//用户列表
                customers: [], //客户列表
                dialogTitle: null,
                dialogFormVisible: false,
                form: {
                    id: null,
                    customer_id: null,
                    userid: null,
                    plan_sale_time: null,
                    proj_name: null,
                    proj_code: null,
                    ms1: null,
                    ms2: null,
                    ms3: null,
                    ms4: null,
                    remark: null,
                    products: [],
                    costs: [],
                },
                rules: [],
                activeName: 'first',
                costs: []
            }
        },
        computed: {
            ...mapGetters([
                'dicArray', 'dicObj'
            ])
        },
        async created() {
            await this.$store.dispatch('loadDic')
            await this.getUsers()
            await this.getCustomer()
            await this.getCost()
            await this.getList()
        },
        methods: {
            async getList() {
                this.listLoading = true
                let query = {
                    page: this.listQuery.page,
                    limit: this.listQuery.limit,
                    where: {
                        plan_sale_time: {
                            $gt: this.listQuery.time ? this.listQuery.time[0]: undefined,
                            $lt: this.listQuery.time ? this.listQuery.time[1]: undefined,
                        },
                        customer_id: this.listQuery.customer_id || undefined,
                        userid: this.listQuery.userid || undefined,
                    }
                }
                let ret = await api.page(query)
                this.listLoading = false
                this.list = ret.rows
                this.total = ret.count
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            showFormAdd() {
                this.dialogTitle = "新建项目"
                this.dialogFormVisible = true
                this.form.costs = this.costs
            },
            //获取客户信息
            async getCustomer() {
                let ret = await customerApi.findAll()
                this.customers = ret.data
            },
            //获取用户信息
            async getUsers() {
                let ret = await userApi.findAll()
                this.users = ret.data
            },
            //获取成本科目
            async getCost() {
                let ret = await costApi.findAll()
                this.costs = ret.data
            },
            //保存项目信息
            async save() {
                this.$appForm.validate(async valid => {
                    if (!valid) return
                    let ret = api.save(this.form)
                    if (ret.success) {
                        this.dialogFormVisible = false
                        this.onFilter()
                    }
                })
            },
            //删除项目信息
            async remove(row) {
                this.$confirm('是否删除该数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ret = await api.remove(row)
                    if (ret.success) {
                        this.onFilter()
                    }
                })
            },
        }
    }

</script>
